<template>
  <!-- 涉案手机查询 -->
  <view class="root">
    <view class="bg-top"></view>
    <view class="root-inner">
      <view class="custom-tab">
        <view class="item phone" :class="{'item-active': type === 'phone'}" @click="handleTab('phone')">
          手机
        </view>
        <view class="item car" :class="{'item-active': type === 'car'}" @click="handleTab('car')">
          电动车
        </view>
      </view>
      <view class="tab-content">
        <view class="tab-content-inner" v-show="type ==='phone'">
          <view class="tab-con-item">
            <view class="c-text">
              手机串码查询
            </view>
            <u--input type="number" :maxlength="30" clearable class="q-input" shape="circle"
              placeholder="请输入手机串码(IMEI码1或IMEI码2)" border="surround" v-model="phoneValue"></u--input>
            <view class="r-text">
              查询结果：<text v-if="phoneResult.status == 2">无</text> <text v-else-if="phoneResult.status == 0"
                class="un-alarm">未涉案</text>
              <text v-else-if="phoneResult.status == 1" class="alarm">涉案</text>
            </view>
            <u-button @click="handleConfimPhone" type="primary" text="查询" shape="circle" color="#2488F5"></u-button>
          </view>
        </view>
        <view class="tab-content-inner" v-show="type ==='car'">
          <view class="tab-con-item">
            <view class="c-text">
              电动车车架号
            </view>
            <u--input :maxlength="30" clearable class="q-input" shape="circle" placeholder="请输入电动车车架号" border="surround"
              v-model="carValue"></u--input>
            <view class="r-text">
              查询结果：<text v-if="carResult.status == 2">无</text> <text v-else-if="carResult.status == 0"
                class="un-alarm">未涉案</text>
              <text v-else-if="carResult.status == 1" class="alarm">涉案</text>
            </view>
            <u-button @click="handleConfimElectricvehicleslved" type="primary" text="查询" shape="circle"
              color="#2488F5"></u-button>
          </view>
        </view>
      </view>
      <view class="r-list">
        <view class="c-text-l">
          查询记录
        </view>
        <view class="r-list-inner" v-show="type === 'phone'">
          <yy-scroll-view ref="scrllViewRef1" :static-params="staticParams1"
            request-url="/mini/registered/queryRecords/page" :auto-request="false">
            <template slot-scope="{list}">
              <view class="t-item" v-for="(item, index) in list " :key="index">
                <view class="t-name">
                  IMEI:{{item.queryCode}}
                </view>
                <view class="i-c i-item-center">
                  <view class="i-label">
                    查询时间:
                  </view>
                  <view class="i-value">
                    {{item.createTime}}
                  </view>
                </view>
                <view class="i-c">
                  <view class="i-label">
                    查询结果:
                  </view>
                  <view class="i-value">
                    <text v-if="item.queryResult == 2">无</text> <text v-else-if="item.queryResult == 0"
                      class="un-alarm">未涉案</text>
                    <text v-else-if="item.queryResult == 1" class="alarm">涉案</text>
                  </view>
                </view>
              </view>
            </template>
          </yy-scroll-view>
        </view>
        <view class="r-list-inner" v-show="type === 'car'">
          <yy-scroll-view ref="scrllViewRef2" :static-params="staticParams2"
            request-url="/mini/registered/queryRecords/page" :auto-request="false">
            <template slot-scope="{list}">
              <view class="t-item" v-for="(item, index) in list " :key="index">
                <view class="t-name">
                  {{item.queryCode}}
                </view>
                <view class="i-c i-item-center">
                  <view class="i-label">
                    查询时间:
                  </view>
                  <view class="i-value">
                    {{item.createTime}}
                  </view>
                </view>
                <view class="i-c">
                  <view class="i-label">
                    查询结果:
                  </view>
                  <view class="i-value">
                    <text v-if="item.queryResult == 2">无</text> <text v-else-if="item.queryResult == 0"
                      class="un-alarm">未涉案</text>
                    <text v-else-if="item.queryResult == 1" class="alarm">涉案</text>
                  </view>
                </view>
              </view>
            </template>
          </yy-scroll-view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    electricvehicleslvedQuery,
    phoneInvolvedQuery
  } from '../api/api'
  import {
    Toast,
    isLoading
  } from '../utils/util'
  export default {
    data() {
      return {
        type: 'phone',
        phoneValue: '',
        carValue: '',
        phoneResult: {},
        carResult: {},
        scrllViewRef1: null,
        staticParams1: {
          type: 0
        },
        scrllViewRef2: null,
        staticParams2: {
          type: 1
        },
      }
    },
    onLoad() {
      this.$refs.scrllViewRef1.getList('init', this.staticParams1)
      this.$refs.scrllViewRef2.getList('init', this.staticParams2)
    },
    methods: {
      handleTab(type) {
        if (type === 'phone') {
          this.$refs.scrllViewRef1.getList('init', this.staticParams1)
        } else {
          this.$refs.scrllViewRef2.getList('init', this.staticParams2)
        }
        this.type = type
      },
      handleConfimPhone() {
        const params = {
          code: this.phoneValue ? this.phoneValue.trim() : this.phoneValue
        }
        if (!params.code) {
          Toast('请输入手机串码！')
          return
        }
        isLoading()
        phoneInvolvedQuery(params)
          .then((res) => {
            if (res.code === 200) {
              this.phoneResult = res.result
              // 
              this.$refs.scrllViewRef1.getList('init', this.staticParams1)
            } else {
              Toast(res.message)
            }
          })
          .finally(() => {
            isLoading(false)
          })
      },
      handleConfimElectricvehicleslved() {
        const params = {
          code: this.carValue ? this.carValue.trim() : this.carValue
        }
        if (!params.code) {
          Toast('请输入电动车车架号！')
          return
        }
        isLoading()
        electricvehicleslvedQuery(params)
          .then((res) => {
            if (res.code === 200) {
              this.carResult = res.result
              this.$refs.scrllViewRef2.getList('init', this.staticParams2)
            } else {
              Toast(res.message)
            }
          })
          .finally(() => {
            isLoading(false)
          })
      }
    }
  }
</script>

<style>
  page {
    width: 100%;
    box-sizing: border-box;
  }
</style>
<style lang="scss" scoped>
  .root {

    .root-inner {
      padding: 0 10rpx;
      width: 100%;

      .un-alarm {
        color: #00AC4C;
      }

      .alarm {
        color: #D91313;
      }
    }

    .bg-top {
      position: absolute;
      height: 124rpx;
      width: 100%;
      top: 0;
      background: #2488F5;
    }

    .custom-tab {
      margin-top: 29rpx;
      height: 97rpx;
      display: flex;
      font-weight: 500;
      font-size: 32rpx;
      color: #545454;
      border-radius: 16rpx 16rpx 0rpx 0rpx;
      align-items: center;
      position: relative;
      background: #c3ddf8;




      .item {
        width: 50%;
        text-align: center;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .item-active {
        font-weight: bold;
        font-size: 36rpx;
        color: #181818;


        &.phone {
          background: url($baseImgUrl + 't-l.png');
          background-size: 100% 100%;
        }

        &.car {
          background: url($baseImgUrl + 't-r.png');
          background-size: 100% 100%;
        }
      }
    }

    .tab-content {
      padding: 44rpx 30rpx 30rpx 30rpx;
      background: #EBF3F9;
      border-radius: 0rpx 0rpx 16rpx 16rpx;

      /deep/.u-button {
        height: 88rpx;
      }

      /deep/ .u-button__text {
        font-size: 36rpx !important;
      }

      /deep/.uni-input {
        text-align: center;
      }

      .tab-content-inner {
        background: #F9F9F9;
        padding: 32rpx 35rpx 43rpx 35rpx;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
        border-radius: 16rpx 16rpx 16rpx 16rpx;

        .c-text {
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
          margin-bottom: 37rpx;
          text-align: center;
        }

        .q-input {
          background: #F2F6F9;
          border-radius: 44rpx 44rpx 44rpx 44rpx;
          border: 1rpx solid #CDE0EE;
          text-align: center;
          height: 88rpx;
        }

        .r-text {
          font-weight: 500;
          font-size: 28rpx;
          color: #545454;
          margin-top: 30rpx;
          margin-bottom: 57rpx;
          text-align: center;
        }
      }
    }

    .r-list {
      margin-top: 15rpx;
      box-shadow: 0rpx -3rpx 6rpx 1rpx rgba(154, 154, 154, 0.16);
      border-radius: 8rpx 8rpx 8rpx 8rpx;

      .c-text-l {
        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
        height: 107rpx;
        align-items: center;
        display: flex;
        padding-left: 33rpx;
        background: linear-gradient(180deg, #F3FAFF 0%, #FFFFFF 71%, #FFFFFF 100%);
      }

      .r-list-inner {
        padding: 0 30rpx 30rpx 30rpx;
        height: 50vh;

        .t-item {
          padding: 22rpx 30rpx 39rpx 30rpx;
          background: rgba(247, 252, 255, 0.92);
          border-radius: 0rpx 0rpx 0rpx 0rpx;
          margin-bottom: 10rpx;

          .t-name {
            font-weight: bold;
            font-size: 36rpx;
            color: #181818;
          }

          .i-c {
            display: flex;
            align-items: center;

            .i-label {
              font-weight: 400;
              font-size: 28rpx;
              color: #A1A1A1;
              margin-right: 18rpx;
            }

            .i-value {
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
            }
          }

          .i-item-center {
            margin-top: 20rpx;
            margin-bottom: 22rpx;
          }
        }
      }
    }
  }
</style>